<script setup>
import {ref} from "vue";
import {useApi} from "@/composables/useApi.js";
import {router} from "@/plugins/1.router/index.js";
import {getStudentList} from "@/api/student.js";
import showTost from "@/components/toast/index.js";
import {storeToRefs} from "pinia";
import {useAppStore} from "@/store/app.js";
let route = useRoute()
import defaultAvatar  from '@/assets/images/avatars/avatar-1.png'
const form = ref({
  type:1,
  templateId:null,
  relevance:null,
  scoretemplate_id:null,
  studentId:null,
  score:null,
  content:null,
  obs:1,
  activeType:1,
  obId:null,
  group_id:null,
  phoneImg:''
})
let list = ref([])
let total = ref(0)//总数
let queryFrom = ref({page: 1, limit: 8, title:''})




const getDetail = ()=>{

}
const page  =ref(1)
const search = () => {
  queryFrom.value.page = 1
  getList()
}
const goDetail = (val)=>{
  console.log('detail')
  router.push(`/community/communityDetail?mass_id=${val.mass_id}&title=${val.title}` )
}

const valid = ref(false)
const projectList = ref(['德', '智', '体', '美', '劳'])


const drawaerDelete = ()=>{

}
const required = (value, name) => !!value || `${name}为必填字段`;

const radios = ref('one')

const onHandle = ()=>{
  router.push('/scoring/template')
}
const typeList = ref([{
  label: '手动输入',
  value: 1
},{
  label: '使用模板',
  value: 2
}])
const refVForm = ref()
const headerConfirm = async(val)=>{
  if(val == 'add'){
    const {data} = await useApi('/student/Api.Student/update').post(form)
    if(data.value.status){
      showTost('提交成功', {duration: 3000, type: 'success'})
      refVForm.value?.reset()
    }
  }
}
const activetypeList = ref([
  {
    title: '社团',
    value: 1
  },
  {
    title: '班级',
    value: 2
  },
  {
    title: '活动',
    value: 3
  },

])





let sexList = ref(['男', '女'])
const appStore = useAppStore()

const {nationArr, sexArr} = storeToRefs(appStore)

const isEdit = ref(false)

const userDetail = async ()=>{
  const {data} = await useApi('/student/Api.Student/detail').post({})
  console.log(data)
  form.value = data.value.data
}

userDetail()
const onHandleEditData = async () => {
  console.log()
  if (isEdit.value === true) {

    const {data} = await useApi('/student/Api.Student/update').post({...form.value})
    if(data.value.status==200){
      showTost("修改成功", {duration: 3000, type: "success"})
      isEdit.value = false
    }
  } else {
    isEdit.value = true
  }
}
const  onReset = () => {
  refVForm.value?.reset()
}
const uploadDialogOpen = () =>{
  addDialogFlag.value = true
}
const addDialogFlag = ref(false)

const uploadSuccess = (val) => {
  console.log(val)
  form.value.phoneImg = val;
  // addDialogFlag.value=false
}
</script>

<template>
  <div class="content">
    <custom-header :show-button="false" @onHandle="headerConfirm" title="一键打分" :show-delete="false" button-text="提交">
    </custom-header>
    <VDivider style="background-color: red" class="v-divider"/>
    <div class="avatar-box">
      <img :src="form.phoneImg||defaultAvatar" alt="">
      <div>
        <div>
          <VBtn
            @click="uploadDialogOpen"
            color="primary"
          >
            上传新照片
          </VBtn>
        </div>
        <div class="tip">
          Allowed JPG, GIF or PNG. Max size of 800K
        </div>
      </div>
    </div>
    <VForm
      :disabled="!isEdit"
      style="background: rgb(var(--v-theme-surface));padding: 30px 24px"
      v-model="valid"
      ref="refVForm"
    >
      <VRow>
        <VCol cols="6" >
          <VTextField
            v-model="form.real_name"
            :rules="[(val)=>required(val,'姓名')]"
          >
            <template v-slot:label>
              <span>姓名</span>
              <span style="color: red;margin-left: 4px;">*</span>
            </template>
          </VTextField>
        </VCol>
        <VCol cols="6">
          <VSelect
            v-model="form.sex"
            :items="sexList"
            item-title="title"
            item-value="title"
            placeholder="请选择性别"
            label="性别"
            :rules="[(val)=>required(val,'性别')]"
            class="input-width-height"
          >
            <template v-slot:label>
              <span>性别</span>
              <span style="color: red;margin-left: 4px;">*</span>
            </template>
          </VSelect>
        </VCol>
        <VCol cols="6">
          <AppDateTimePicker
            class="input-width-height"
            v-model="form.brith_time"
            label="定时发送"
            placeholder="请选择出生日期"
            :rules="[(val)=>required(val,'出生日期')]"
          >
            <template v-slot:label>
              <span>出生日期</span>
              <span style="color: red;margin-left: 4px;">*</span>
            </template>
          </AppDateTimePicker>
        </VCol>
        <VCol cols="6">
          <VSelect
            v-model="form.nation"
            :items="nationArr"
            item-title="title"
            item-value="title"
            placeholder="请选择民族"
            label="民族"
            :rules="[(val)=>required(val,'民族')]"
            class="input-width-height"
          >
            <template v-slot:label>
              <span>民族</span>
              <span style="color: red;margin-left: 4px;">*</span>
            </template>
          </VSelect>
        </VCol>
        <VCol cols="6" >
          <VTextField
            disabled
            v-model="form.studentId"
          >
            <template v-slot:label>
              <span>学生ID</span>
            </template>
          </VTextField>
        </VCol>

        <VCol cols="6">
          <AppDateTimePicker
            class="input-width-height"
            v-model="form.enter_time"
            label="入学日期"
            placeholder="请选择入学日期"
            :rules="[(val)=>required(val,'入学日期')]"
          >
            <template v-slot:label>
              <span>入学日期</span>
              <span  style="color: red;margin-left: 4px;">*</span>
            </template>
          </AppDateTimePicker>
        </VCol>


        <VCol cols="6">
          <VTextField
            v-model="form.idCard"
            placeholder="身份证号码"
            maxLength="18"
            :rules="[(val) => required(val, '身份证号码'), (val) => val.length === 18 || '身份证号码必须是18位']"
            label="请输入身份证号码"
         >
            <template v-slot:label>
              <span>身份证号</span>
              <span  style="color: red;margin-left: 4px;">*</span>
            </template>
          </VTextField>
        </VCol>
        <VCol cols="6">
          <VTextField
            v-model="form.address"
            label="家庭住址"
            :rules="[(val)=>required(val,'家庭住址')]"
            placeholder="请输入家庭住址"
          >
            <template v-slot:label>
              <span>家庭住址</span>
              <span  style="color: red;margin-left: 4px;">*</span>
            </template>
          </VTextField>
        </VCol>
        <VCol cols="6">
          <VTextField
            v-model="form.fatherName"
            label="父亲姓名"
            placeholder="请输入父亲姓名"
          >
          </VTextField>
        </VCol>
        <VCol cols="6">
          <VTextField
            v-model="form.fatherPhone"
            label="父亲手机号"
            placeholder="请输入父亲手机号"
          >

          </VTextField>

        </VCol>
        <VCol cols="6">
          <VTextField
            v-model="form.motherName"
            label="母亲姓名"
            placeholder="请输入母亲姓名"
          >

          </VTextField>
        </VCol>
        <VCol cols="6">
          <VTextField
            v-model="form.motherPhone"
            label="手机号"
            placeholder="请输入母亲手机号"
          >

          </VTextField>
        </VCol>
        <VCol cols="6">
          <VTextField
            v-model="form.emergencyName"
            label="紧急联系人"
            placeholder="请输入紧急联系人"
          >
          </VTextField>
        </VCol>
        <VCol cols="6">
          <VTextField
            v-model="form.emergencyPhone"
            label="紧急联系人手机号"
            placeholder="请输入紧急联系人手机号"
          >
          </VTextField>
        </VCol>
        <VCol cols="6">
          <div class="d-flex justify-start" style="margin-top:20px">
            <VBtn
              color="primary"
              class="me-4"
              @click="onHandleEditData"
            >
              {{ isEdit == true ? '保存' : '编辑'}}
            </VBtn>
            <VBtn
              color="error"
              variant="outlined"
              @click="onReset"
            >
              重置
            </VBtn>
          </div>
        </VCol>
      </VRow>


    </VForm>
    <div>
      <VDialog
        :persistent="true"
        max-width="600"
        :model-value="addDialogFlag"
      >

      <div class="dialog-body" style="width: 100%;height: 300px;padding: 20px;">
        <AppDrawerHeaderSection
          title="上传新照片"
          @cancel="addDialogFlag=false"
        />
        <VDivider/>
        {{form.phoneImg}}
        <upload-ohter-img
          style="width:100%;margin-top: 16px"
          :limit="1"
          :fileSize="10"
          :value="form.phoneImg"
          @input="uploadSuccess"></upload-ohter-img>
      </div>
      </VDialog>
    </div>
  </div>
</template>



<style scoped lang="scss">
@use "@configured-variables" as variables;

.avatar-box{
  display: flex;
  align-items: center;
  background-color: rgb(var(--v-theme-surface));
  padding-left: 24px;
  >img{
    width: 100px;
    height: 100px;
    border-radius: 8px;
    margin-right: 20px;
    margin-top:20px;
  }
  .tip{
    font-family: Inter;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0px;
    margin-top:10px;
  }
}

.header-box {
  background-color: rgb(var(--v-theme-surface));
  display: flex;
  align-items: center;
  height: 62px;
  padding: 12px 0 12px 24px;
  border-radius: 8px 8px 0 0;

  .title {
    font-family: PingFang SC;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    .sub-title{
      font-size: 14px;
      color:rgba(46, 38, 61, 0.7);
    }
  }

  .tabs {
    margin-left: 30px;
    display: flex;
    align-items: center;

    .active {

      background-color: rgba(140, 87, 255, 0.16);
      border-radius: 6px;
      color: rgba(140, 87, 255, 1);
    }

    .item {
      padding: 22px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      display: flex;
      font-size: 16px;
      align-items: center;
      width: 128px;
      height: 38px;
      margin-right: 4px;
      cursor: pointer;

      > i {
        font-size: 18px;
        margin-right: 4px;
      }
    }
  }
}
.search {
  display: flex;
  align-items: center;
  margin-left:auto !important;
  border-radius: 74px;
  inline-size: 291px;
  margin-inline-start: 40px;
  padding-block: 8px;
  padding-inline: 16px;
  margin-right: 20px;
  background-color: variables.$vertical-nav-background-color;

}
.examination-session{
  margin-left: 30px;
  cursor: pointer;
  width: 120px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: rgba(var(--v-theme-button-grey-color));
  background: rgba(var(--v-theme-button-grey-bg));

}
.checkout-box{
  border-radius: 12px;
  height: 172px;
  display: flex;
  justify-content: space-between;
  border:1px solid rgba(46, 38, 61, 0.12);
  padding: 20px;
  img{
    //width:58px;
    height:141px;
  }
  .first-box{
    display: flex;
    align-items: center;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: rgba(46, 38, 61, 0.9);
    i{
      margin-right:5px;
    }
  }
  .second-box{
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0px;
    vertical-align: middle;
    color: rgba(46, 38, 61, 0.7);
  }
}
</style>
